<template>
	<view class="wrap">
		<view class="search-bar">
			<view class="search-bar-inp">
				<input v-model.trim="keywords" placeholder="搜索人名/组名" placeholder-style="color:#ccc" type="text" value=""
					confirm-type="search" @confirm="searchFuc" :focus="focusState" @blur="focusState = false" />
				<view v-if="keywords" @click="searchClear" class="searchClear">
					<uni-icons size="16" color="#999999" type="clear"></uni-icons>
				</view>
				<view class="btn" @click="searchFuc" v-else>
					<uni-icons size="22" color="#0091ff" type="search"></uni-icons>
				</view>
			</view>
		</view>
		<memberTree :tree="data" :expandedIds="expandedIds" @node-click="nodeClick" v-if="data.length"></memberTree>
		<view class="empty" v-else>
			<view class="circle">
				<image src="@/static/images/default.png"></image>
			</view>
			<view class="title">
				~暂无相关数据~
			</view>
		</view>
		<view class="bottom-block">

		</view>
		<view class="item_botm" @click="imTasksClick">
			<view :class="[isState > 0 ? 'botm' : 'botm botmbg']">立即分配任务</view>
		</view>
	</view>
</template>

<script>
import memberTree from '@/components/member-tree/tree-nodes.vue';
import { getAllMembers } from '@/apis/building.js';
import { hanleToken } from '@/utils/utils.js';
import { approvePlan, reApproveUsers } from '@/apis/approve.js';
export default {
	components: { memberTree },
	data() {
		return {
			focusState:false,
			keywords: '',
			tree: [],
			data: [],
			// 勾选的数据
			checkArr: [], 
			// 用于点击打开子级
			expandedIds: [], 
			form: {}
		};
	},
	onLoad(os) {
		if (os.id) {
			// 维修详情跳过来分配人的情况

			uni.getStorage({
				key: 'approve',
				success: res => {
					this.form = res.data;
				}
			});
		}
		uni.showLoading({
			title: '加载中',
			mask: true
		});
		getAllMembers().then(res => {
			this.tree = res.data;
			this.data = JSON.parse(JSON.stringify(this.tree));
			uni.hideLoading();
		});
	},
	computed: {
		isState() {
			return this.checkArr.length || false;
		}
	},
	methods: {
		// 清空搜索
		searchClear() {
			this.keywords = '';
			this.data = JSON.parse(JSON.stringify(this.tree));
			this.$nextTick(() => {
				this.focusState = true;
			});
		},
		// 搜索
		searchFuc(val) {
			// console.log('hahhahaha', val);
			// this.keywords = val;
			if (!val.detail.value) {
				this.data = JSON.parse(JSON.stringify(this.tree));
			} else {
				this.expandedIds = [];
				this.data = this.filterTree(JSON.parse(JSON.stringify(this.tree)), val.detail.value);
			}
		},
		// 点击每一项
		nodeClick(res) {
			let cindex = this.checkArr.findIndex(item => item.id === res.id);
			if (!res.children) {
				if (res.isOpen) {
					this.checkArr.push(res);
				} else {
					if (cindex != -1) {
						this.checkArr.splice(cindex, 1);
					}
				}
			}
			// console.log('哈哈收拾收拾', this.checkArr, res.id);
			this.$forceUpdate();
		},
		// 分配任务
		imTasksClick() {
			if (this.checkArr.length > 0) {
				if (this.form.id) {
					uni.showLoading({
						title: '提交中',
						mask: true
					});
					console.log('选中的人', this.checkArr);
					let assignUsers = [];
					for (let i = 0; i < this.checkArr.length; i++) {
						if (assignUsers.indexOf(this.checkArr[i].id) == -1) {
							assignUsers.push(this.checkArr[i].id);
						}
					}
					let data = {
						...this.form

					};
					if (this.form.planId) {
						data.userIds = assignUsers;
					} else {
						data.assignUsers = assignUsers;
					}
					(this.form.planId ? reApproveUsers : approvePlan)(data).then(() => {
						uni.hideLoading();
						uni.showModal({
							title: '提示',
							content: '分配成功',
							showCancel: false,
							success: () => {
								uni.navigateBack({
									delta: 1
								});
							}
						});
					});
				} else {
					hanleToken('set', 'planUserArr', this.checkArr);
					uni.navigateBack({
						delta: 1
					});
				}
			}
		},

		// 关键词过滤
		filterTree(nodes, query) {
			// 条件就是节点的title过滤关键字
			let predicate = function (node) {
				// let strs = ''
				// if(node && node.title){
				// 	const reg = new RegExp(query,'g');
				// 	strs = node.title.replace(reg,`<text style="color: yellow">${query}</text>`)
				// 	console.log("进来了，，，",node,query,strs)
				// }
				return node.title.includes(query);
			};
			
			// 结束递归的条件
			if (!(nodes && nodes.length)) {
				return [];
			}
			let newChildren = [];
			for (let node of nodes) {
				if (node.children && node.children.length) {
					node.show = true;
				}

				// 一、带父节点     以下两个条件任何一个成立，当前节点都应该加入到新子节点集中
				// 1. 子孙节点中存在符合条件的，即 subs 数组中有值
				// 2. 自己本身符合条件
				let subs = this.filterTree(node.children, query);
				
				if (predicate(node)) {
					newChildren.push(node);
				} else if (subs && subs.length) {
					node.children = subs;
					newChildren.push(node);
					this.expandedIds.push(node.id);
				}

				// 二、不带父节点     以下只需要考虑自身的节点满足条件即可,不用带上父节点
				// if (predicate(node)) {
				// 	newChildren.push(node);
				// 	node.children = this.filterTree(node.children, query);
				// } else {
				// 	newChildren.push(...this.filterTree(node.children, query));
				// }
			}
			return newChildren.length ? newChildren : [];
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #f6f6f6;
	color: #333;
	width: 100%;
}

.empty {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 300rpx;

	.circle {
		width: 64rpx;
		height: 64rpx;
	}

	image {
		width: 64rpx;
		height: 64rpx;
	}

	.title {
		font-size: 26rpx;
		color: #999;
		font-weight: 400;
		margin-top: 10rpx;
	}
}

.wrap {
	background-color: #f6f6f6;
	width: 100%;
	min-height: 100vh;

	.item_botm {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99;
		background-color: #ffffff;
		padding: 0 20rpx 0rpx 20rpx;
		height: 98rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-top: 1rpx #eee solid;

		.botm {
			width: 720rpx;
			margin: 0 auto;
			height: 70rpx;
			background: #0091ff;
			border-radius: 8rpx;
			line-height: 70rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: 500;
			color: #ffffff;
		}

		.botmbg {
			background: #efefef;
			color: #cccccc;
		}
	}
}

.bottom-block {
	width: 100%;
	height: 240rpx;
}

.search-bar {
	background-color: #fff;
	width: 100%;
	margin-bottom: 16rpx;
	display: flex;

	.search-bar-inp {
		width: 710rpx;
		margin: 24rpx auto;
		background-color: #f6f6f6;
		border-radius: 8rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		input {
			font-size: 26rpx;
			flex: 1;
			padding: 12rpx 28rpx;
		}
		.searchClear{
			margin-right: 20rpx;
		}

		.btn {
			width: 90rpx;
			text-align: center;
			height: auto;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>
